<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      非 Props 特性 | 透传 Attriblutes | attrs

      是什么：
        当调用组件时，传递下去的属性没有在组件内部通过 props 选项声明的话，那个该属性就是一个 attr 。组件内部会将这些 attr 统一收集到 $attrs 这个实例属性上

      特点：
        1. attr 的数据，会自定继承到组件的根元素上。(该特点可以在组件内部通过 inheritAttrs: false 这个配置来禁用)
        2. class 与 style 这两个属性是非常非常特殊的两个 attr
          其他的 attr 都是走替换操作，而他们是 合并操作
          这两个 attr 不受 inheritAttrs 的控制

      结合 inheritAttrs: false 与 $attrs 实例属性来做一个基础组件 baseInput
     -->

    <div id="app">
      <hello
        name="张三"
        age="18"
        sex="男"
        class="box2"
        style="border: 1px solid #000"
      ></hello>

      <base-input label="用户名" type="text" placeholder="请输入1"></base-input>
      <base-input
        label="密码"
        type="password"
        placeholder="请输入2"
        readonly
      ></base-input>
      <base-input
        label="性别"
        type="text"
        placeholder="请输入3"
        maxlength="3"
        disabled
      ></base-input>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      Vue.component("hello", {
        inheritAttrs: false, // 禁用

        template: `
          <div sex="不祥" class="box1" style="color: red">
            <h2>Hello</h2>
          </div>
        `,
        props: ["name", "age"],
        mounted() {
          console.log(this.$attrs);
        },
      });

      Vue.component("baseInput", {
        inheritAttrs: false, // 禁用
        template: `
          <div>
            <label>
              <span>{{ label }}：</span> 
              <!--
              <input 
                :type="$attrs.type" 
                :placeholder="$attrs.placeholder" 
                :maxlength="$attrs.maxlength" 
                :disabled="$attrs.disabled"
                />
                -->

              <input 
                v-bind="$attrs"
                />
            </label>  
          </div>
        `,
        props: ["label"],
      });

      const vm = new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>
